"use client";
import LoremIpsum from "@/components/Loremlpsum";
import { useMotionValueEvent, useScroll } from "framer-motion";
import { useCallback, useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
import store from "@/store";

export default observer(() => {
  const targetRef = useRef<HTMLDivElement>(null);
  const { scrollY, scrollYProgress } = useScroll({ container: targetRef });

  const setAni = useCallback(
    (scrollTop: number) => {
      if (targetRef.current) {
        const baseVal = window.innerHeight / 2 - 100; // 基准值(过了基准值则transform，否则只有opacity)
        [...targetRef.current.children].forEach((item, index) => {
          const top = Number(item.getBoundingClientRect().top.toFixed(0));
          const greaterThanBase = top < baseVal; // 过了基准值
          const diffVal = Math.abs(top - baseVal);
          const radio = diffVal / baseVal;
          const scaleRadio = greaterThanBase ? 1 + radio : 1;
          const opacityRadio = 1 - radio;
          item.setAttribute(
            "style",
            `transform: scale(${scaleRadio},${scaleRadio});opacity: ${opacityRadio};`
          );
        });
      }
    },
    [targetRef]
  );
  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    store.changeIntroductionProcess(latest);
  });
  useMotionValueEvent(scrollY, "change", (latest) => {
    setAni(latest);
  });

  useEffect(() => {
    setTimeout(() => {
      setAni(0);
    });
  }, [targetRef, setAni]);
  return (
    <div>
      <div className="video-container absolute top-0 left-0 right-0 bottom-0 w-screen h-screen">
        <video
          className="w-full h-full object-fill"
          autoPlay
          loop
          muted
          crossOrigin="use-credentials"
        >
          <source src="/feedmusic/video/intro.mp4" type="video/mp4" />
          Sorry, your browser doesn&apos;t support embedded videos.
        </video>
      </div>
      <div
        ref={targetRef}
        className="transition-all whitespace-normal pt-[45vh] pb-[43vh] text-white leading-[60px] sm:leading-[60px] md:leading-[100px] absolute top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.5)] text-[24px] sm:text-[24px] md:text-[48px] lg:text-[48px] text-center overflow-auto scrollbar-none"
      >
        <p className="">When you want something,</p>
        <p className="">all the universe conspires</p>
        <p className="">in helping you to achieve it.</p>
        <p className="">Paulo Coelho</p>

        <p className="h-[20vh]"></p>

        <p className="">Feed is that conspiracy:</p>
        <p className="">the conspiracy of trust.</p>

        <p className="h-[20vh]"></p>

        <p>Trust is the single</p>
        <p className="">most important ingredient</p>
        <p className="">missing from digital relationships.</p>

        <p className="h-[20vh]"></p>

        <p>Boston Consulting Group</p>
        <p className="">and the World Economic Forum</p>
        <p className="">forecast the digital economy</p>
        <p>to be worth between</p>
        <p>1.5 and 2.5 trillion dollars</p>
        <p>by 2016.</p>

        <p className="h-[20vh]"></p>

        <p>The difference</p>
        <p>between those numbers</p>
        <p>is trust.</p>

        <p className="h-[30vh]"></p>

        <p className=""> Feed is a digital mechanism of trust </p>
      </div>
      首页
    </div>
  );
});
